<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" href="common_form.css">
</head>
<script>
    var flag=false;
    function check(str) {
        var a = document.getElementById(str);
        var b = document.getElementById(str + "Check");
        if (str === "username") {
            if (a.value === "")
                b.innerHTML="用户名不能为空";
            else{
                for(var i=0;i<localStorage.length;i++){
                    var key=localStorage.key(i);
                    var ss=localStorage.getItem(key);
                    var data=JSON.parse(ss);
                    if(a.value===data.user)
                        b.innerHTML="此用户名已存在";
                }
                b.innerHTML="";
            }
        }
        else if (str === "password") {
            L=a.value.length;
            if(L===0){
                b.innerHTML="密码不能为空";
                document.getElementById("lv1").style.borderTopColor="#D3D3D3";
                document.getElementById("lv2").style.borderTopColor="#D3D3D3";
                document.getElementById("lv3").style.borderTopColor="#D3D3D3";
            }else if(L>16){
                b.innerHTML="密码长度不能大于16";
                document.getElementById("lv1").style.borderTopColor="#D3D3D3";
                document.getElementById("lv2").style.borderTopColor="#D3D3D3";
                document.getElementById("lv3").style.borderTopColor="#D3D3D3";
            }else if(L<6){
                b.innerHTML="密码长度不能小于6";
                document.getElementById("lv1").style.borderTopColor="#D3D3D3";
                document.getElementById("lv2").style.borderTopColor="#D3D3D3";
                document.getElementById("lv3").style.borderTopColor="#D3D3D3";
            }
            else {
                b.innerHTML="";
                var reg=/^[0-9]{6,16}$|^[a-zA-Z]{6,16}$/; //全是数字或全是字母 6-16个字符
                var reg1=/^[A-Za-z0-9]{6,16}$/; //数字、26个英文字母 6-16个字符
                var reg2=/^\w{6,16}$/;// 由数字、26个英文字母或者下划线组成的字符串 6-16个字符
                if(a.value.match(reg)){
                    document.getElementById("lv1").style.borderTopColor="red";
                    document.getElementById("lv2").style.borderTopColor="#D3D3D3";
                    document.getElementById("lv3").style.borderTopColor="#D3D3D3";
                }else if(a.value.match(reg1)){
                    document.getElementById("lv1").style.borderTopColor="red";
                    document.getElementById("lv2").style.borderTopColor="yellow";
                    document.getElementById("lv3").style.borderTopColor="#D3D3D3";
                }
                else if(a.value.match(reg2)){
                    document.getElementById("lv1").style.borderTopColor="red";
                    document.getElementById("lv2").style.borderTopColor="yellow";
                    document.getElementById("lv3").style.borderTopColor="green";
                }
            }
        }
        else if(str==="again"){
            var z=document.getElementById("password").value;
            if(z!==a.value){
                b.innerHTML="两次输入的密码不一致";
            }
            else b.innerHTML="";
        }
        else{
            if(a.value==="")
                b.innerHTML="邮箱不能为空";
            else {
                var regm = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
                isok= regm.test(a.value);
                if(isok)
                    b.innerHTML="";
                else b.innerHTML="邮箱不合法";
            }
        }

    }

    function onSubmit() {
        if(flag){
            var data=new Object();
            data.user=document.getElementById("username").value;
            data.password=document.getElementById("password").value;
            data.mail=document.getElementById("email").value;
            data.str=JSON.stringify(data);
            localStorage.setItem("userID"+document.getElementById("username").value,data.str);
            alert("注册成功！");
        }
        else{
            alert("注册信息错误");
        }
    }
</script>
<body>
<header>
    <div class="header-line"></div>
</header>
<div class="content">
    <img class="content-logo" src="sinUp.jpg" alt="logo">
    <h1 class="content-title">创建账号</h1>
    <div class="content-form">
        <form method="post" onsubmit="return submitTest()">
            <div id="m1">
                <input class="user" type="text" name="user" id="username" placeholder="请输入用户名" onblur='check("username")'>
            </div>
            <span id="usernameCheck" class="check" ></span>
            <div id="m2">
                <input class="password" type="password" name="password" id="password" placeholder="请输入密码（长度至少6位）" onkeyup='check("password")'>
            </div>
            <span id="passwordCheck" class="check" ></span>
            <div class="mm-btm" >
            <table   border="0px" cellpadding="0px" cellspacing="1px"  >
                  <tr class="row">
                   <td width="40px" id="lv1" style="border-top: 3px solid darkgrey;">弱</td>
                   <td width="40px" id="lv2" style="border-top: 3px solid darkgrey;">中</td>
                   <td width="40px" id="lv3" style="border-top: 3px solid darkgrey;">强</td>
                  </tr>
            </table>
            </div>
            <div id="m22">
                <input class="password" type="password" name="password" id="again" placeholder="确认密码" onblur='check("again")'>
            </div>
            <span id="againCheck" class="check" ></span>
            <div id="m3">
                <input class="mail" type="text" name="email" id="email" placeholder="请输入邮箱" onblur='check("email")'>
            </div>
            <span id="emailCheck" class="check" > </span>
            <div id="m4">
                <input class="content-form-signup" type="submit" value="创建账号" onclick="onSubmit()">
            </div>
        </form>
    </div>
    <div class="conten-login-des">已拥有账号？</div>
    <a class="conten-login-link" href="logIn.html">登录</a>
</div>
<script color='125,25,150' opacity='0.8' zIndex="-2" count="199" type="text/javascript" src="triangle.js"></script>
</body>
</html>